<template>
  <div class="Statistics">
    <div class="header">
      <div class="top"></div>
      <div class="bottom"></div>
      <div class="info">
        <div class="title">业务统计</div>
        <div class="list">
          <div class="item">
            <img src="@/assets/statistics/1.svg" alt />
            <div class="t1">
              <ICountUp :delay="500" :endVal="662" :options="options" />万吨
            </div>
            <div class="t2">累计发运量</div>
          </div>
          <div class="item">
            <img src="@/assets/statistics/2.svg" alt />
            <div class="t1">
              <ICountUp :delay="500" :endVal="105174" :options="options" />万元
            </div>
            <div class="t2">累计交易额</div>
          </div>
          <div class="item">
            <img src="@/assets/statistics/3.svg" alt />
            <div class="t1">
              <ICountUp :delay="500" :endVal="197158" :options="options" />车次
            </div>
            <div class="t2">累计运单数</div>
          </div>
          <div class="item">
            <img src="@/assets/statistics/4.svg" alt />
            <div class="t1">
              <ICountUp :delay="500" :endVal="24942" :options="options" />用户
            </div>
            <div class="t2">认证用户数</div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="title">全国车辆分布图</div>
      <div id="carmap" style="height: 800px; width: 100%;"></div>
    </div>
  </div>
</template>

<script>
import "@/utils/china.js";
import ICountUp from "vue-countup-v2";
export default {
  name: "Statistics",
  components: {
    ICountUp
  },
  data() {
    return {
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      carData: [
        {
          cityName: "河南省",
          carCount: 8250
        },
        {
          cityName: "河北省",
          carCount: 134
        },
        {
          cityName: "安徽省",
          carCount: 637
        },
        {
          cityName: "山西省",
          carCount: 234
        },
        {
          cityName: "山东省",
          carCount: 460
        },
        {
          cityName: "四川省",
          carCount: 120
        },
        {
          cityName: "福建省",
          carCount: 87
        },
        {
          cityName: "内蒙古省",
          carCount: 5
        },
        {
          cityName: "湖南省",
          carCount: 3
        },
        {
          cityName: "上海",
          carCount: 2
        },
        {
          cityName: "吉林省",
          carCount: 10
        }
      ]
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {
      this.setMap();
    },
    renderMapData(obj) {
      if (obj.cityName && obj.cityName.endsWith("自治区")) {
        obj.name = obj.cityName.substr(0, obj.cityName.length - 3);
      } else if (obj.cityName) {
        obj.name = obj.cityName.substr(0, obj.cityName.length - 1);
      }
      return { name: obj.name, value: obj.carCount };
    },
    setMap() {
      let renderData = this.carData.map(this.renderMapData);
      let chinaMap = this.$echarts.init(document.getElementById("carmap"));
      var mapOption = {
        tooltip: {
          borderRadius: 8,
          padding: 20,
          textStyle: {
            color: "white",
            decoration: "none",
            fontSize: 12,
            fontWeight: "bold"
          },
          formatter: function(params) {
            return (
              '<span style="font-size:18px;color:#333">' +
              params.name +
              "：</span>" +
              '<span style="margin-left:5px;font-size:18px;color:#333">' +
              (isNaN(params.value) ? "0辆" : params.value + "辆") +
              "</span>"
            );
          }
        },
        legend: {
          orient: "vertical"
        },
        visualMap: {
          min: -2,
          max: +2,
          left: "left",
          color: ["#78a3c6", "#a6bfd8", "#98bfe0"],
          top: "bottom",
          calculable: true,
          show: false
        },
        toolbox: {
          show: false,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: {
              readOnly: false
            },
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            type: "map",
            mapType: "china",
            roam: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            data: renderData
          }
        ]
      };
      chinaMap.setOption(mapOption);
    }
  }
};
</script>

<style lang="scss" scoped>
.Statistics {
  .header {
    position: relative;
    .top {
      height: 350px;
      background: $primaryColor;
    }
    .bottom {
      height: 220px;
      background: #f5fafd;
    }
    .info {
      width: 70%;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      .title {
        font-size: 60px;
        text-align: center;
        margin: 30px 0;
        margin-bottom: 60px;
        color: #fff;
      }
      .list {
        background: #fff;

        box-shadow: 0px 4px 10px 2px rgba(74, 74, 74, 0.3);
        display: flex;
        .item {
          border-right: 1px solid #dddddd;
          width: 25%;
          height: 260px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          img {
            width: 60px;
          }
          .t1 {
            margin-top: 20px;
            margin-bottom: 16px;
            font-family: Open Sans;
            font-weight: 600;
            font-size: 2.125em;
            line-height: 1.55;
            color: rgb(51, 51, 51);
          }
          .t2 {
            font-family: Open Sans;
            font-weight: 400;
            font-size: 16px;
            line-height: 1.6;
            color: rgb(153, 153, 153);
          }
        }
        .item:last-child {
          border: none;
        }
      }
    }
  }
  .main {
    padding-bottom: 100px;
    .title {
      font-size: 40px;
      text-align: center;
      margin-top: 100px;
      margin-bottom: 50px;
    }
    // height: 1000px;
  }


  @media screen and (max-width: 767px) {
      .header{
        .bottom{
          display: none;
        }
        .info{
          width: 80%;
          top: 10%;
          position: static;
          transform: none;
          margin: -60% auto;
          .list{
            flex-direction: column;
            .item {
              width: 100%;
            }
          }
        }
      }

    }
}
</style>
